<!-- 工作组 -->

<template>
	<view>
		<view class="top-back">
			<view class="top-name">工作组</view>
			<view class="top-num">({{count}})</view>
			<view class="top-right top-right-left" @click="sortAction">
				<view class="top-exit">新增</view>
			</view>
			<view class="top-right" @click="selectAction">
				<view class="top-contnet">筛选</view>
				<image class="top-icon" src="../../../static/select.png"></image>
			</view>
		</view>
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" stripe emptyText=" ">
				<uni-tr>
					<uni-th align="left" width="200px">工作组</uni-th>
					<uni-th align="left">成员</uni-th>
					<uni-th align="center" width="120px">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="left"><text selectable="true">{{ item.name }}</text></uni-td>
					<uni-td align="left"><text selectable="true">{{ item.member }}</text>
					</uni-td>
					<uni-td align="center">
						<view style="display: flex;justify-content: center;">
							<view class="item-blue-text" @click="delAction(item)">删除</view>
							<view style="margin-left: 12px;" class="item-blue-text" @click="editAction(item)">编辑</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>

			<view class="search-back" v-if="tableData.length == 0">
				<image class="search-image" :src="pc_search_nodata"></image>
				<view class="search-noresult">没有查询到结果</view>
			</view>
			<view style="margin-top: 10px;margin-bottom: 10px;" v-if="tableData.length > 0">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="count"
					@change="change" />
			</view>
		</view>
		<addTeam v-if="showAddTeam" :selectItem='selectItem' :editType='editType' @successBack='requestData'
			@addTeamClose='clickAddTeamClose'></addTeam>
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="screenFormData" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.name" placeholder="工作组" />
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.realName" placeholder="手机号或姓名" />
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
			<dateTimeSelect ref="myPicker" @submit="handleSubmit" :start-year="2020" :end-year="2025" />
		</popSelect>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="danger" cancelText="取消" confirmText="确定" title="提示" content="确定要删除吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import addTeam from "@/packageC/PhonePC/workTeam/add.vue"
	import popSelect from '@/components/popSelect/popSelect.vue'
	let app = ''

	export default {
		components: {
			addTeam,
			popSelect
		},
		data() {
			return {
				role: '', //当前登录角色
				roleUrl: '',
				showAddTeam: false,
				tableData: [],
				count: 0, //总数
				pageSize: 10, // 每页数据量
				pageCurrent: 1, // 当前页
				x: 0,
				y: 0,
				showDialog: false,
				sortSelect: "",
				screenx: 0,
				screeny: 0,
				showScreen: false,
				screenFormData: {
					name: '',
					realName: ''
				},
				screenSelect: false,
				selectItem: {},
				editType: 'add',
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png'
			}
		},
		mounted() {
			var _this = this;
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			this.requestData();
		},
		methods: {
			// 分页触发
			change(e) {
				this.pageCurrent = e.current
				this.requestData()
			},
			//网络请求示例
			async requestData() {

				let _this = this
				var url = `/${_this.roleUrl}/workGroup/list`;
				let parmas = {
					size: _this.pageSize,
					page: _this.pageCurrent,
				};

				if (this.screenSelect) {
					if (_this.screenFormData.name) {
						this.$set(parmas, 'name', 'lk:' + _this.screenFormData.name)
					}
					if (_this.screenFormData.realName) {
						this.$set(parmas, 'keyword', _this.screenFormData.realName)
					}
				}

				const res = await this.$myRequest({
					url: url,
					method: 'POST', //默认是GET
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.count = res.data.data.count;

					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						var name = '';
						for (var j = 0; j < item.users.length; j++) {
							var value = item.users[j];
							if (j == 0) {
								name = value.account.realName
							} else {
								name += ',' + value.account.realName
							}
						}
						item.member = name;
						arr.push(item)
					}

					_this.tableData = arr
				}
			},
			delAction(item) {
				this.selectItem = item;
				this.$refs.alertDialog.open()
			},
			async dialogConfirm() {
				console.log('点击确认')
				let _this = this

				let parmas = {
					'ids': this.selectItem.id,
				}
				const res = await this.$myRequest({
					url: `/${_this.roleUrl}/workGroup`,
					method: 'DELETE',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.requestData()
				}
			},

			dialogClose() {
				console.log('点击关闭')
			},

			//新增
			sortAction() {
				this.showAddTeam = true;
			},
			//编辑
			editAction(item) {
				this.editType = 'edit';
				this.selectItem = item;
				this.showAddTeam = true;
			},
			//筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX

				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})

				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},

			//筛选重置
			selectReset() {
				this.screenFormData = {
						name: '',
						realName: ''
					},
					this.screenSelect = false;
				this.requestData();
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen;
				this.requestData()
			},

			clickAddTeamClose() {
				this.showAddTeam = false;
			}
		}
	}
</script>

<style scoped>
	.top-back {
		display: flex;
		align-items: center;
		padding: 10px;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
		margin-left: 30px;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		margin-left: 40px;
		margin-right: 16px;
		width: auto;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 100px;
		height: 100px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 56px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}
</style>